<template>
	<div className="app">
		<hr class="two" />
		<h2>====Suspense 组件异步出现时，设置替代组件 ===</h2>

		<!--
			插槽的原理，替换为加载的组件
		-->
		<Suspense>
			<template v-slot:default>
				<Child />
			</template>
			<template v-slot:fallback>
				<div>
					<!--退路-->
					<h3>loading...</h3>
					<Hooks></Hooks>

				</div>

			</template>
		</Suspense>
	</div>
</template>

<script>
// import Child from "./components/Child"; 静态引入组件
import {defineAsyncComponent} from "vue";
import Hooks from "@/components/Learn/hooks/Hooks";

const Child = defineAsyncComponent(() => import('./Child')); //动态引入组件(异步)
export default {
	name: 'SuspenseUse',
	components: {Child, Hooks},
}
</script>

<style>
#app {
	font-family: Avenir, Helvetica, Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-align: center;
	color: #2c3e50;
	margin-top: 60px;
}

.app {
	background: grey;
	padding: 10px;
}
</style>
